<template>
	<view>
		<view class="container">
			<view class="title">{{Order.sellername}}</view>
			<view class="goods_item" v-for="item in OrderDetail.goods">
				<view>
					<image :src="item.icon" class="goods_img"></image>
				</view>
				<view class="goods_info">
					<view class="name_price">
						<view class="goods_name">
							<text>{{item.name}}</text>
						</view>
						<view class="goods_price">
							<image class="money_icon" src="../../static/icons/money.png"></image>
							<text>{{item.price}}</text>
						</view>
					</view>
					<view>
						<text class="goods_quantity">x{{item.quantity}}</text>
					</view>
				</view>
			</view>

			<view class="row">
				<view>
					<text>包装费</text>
				</view>
				<view>
					<image class="money_icon" src="../../static/icons/money.png"></image>
					<text>2</text>
				</view>
			</view>

			<view class="row">
				<view>
					<text>配送费</text>
				</view>
				<view>
					<image class="money_icon" src="../../static/icons/money.png"></image>
					<text>0</text>
				</view>
			</view>

			<view class="row">
				<view>
					<text>红包/抵用券</text>
				</view>
				<view style="color: #ff0000;">
					<text>¥-2</text>
				</view>
			</view>

			<view class="row">
				<view>
				</view>
				<view>
					<text>实付 </text>
					<text style="font-size: 36rpx;color: #ff0000;">¥{{Order.orderAmount}}</text>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="title">
				<text>配送信息</text>
			</view>

			<view class="row">
				<view>送达时间</view>
				<view>尽快送达</view>
			</view>

			<view class="row">
				<view>收货地址</view>
				<view>{{OrderDetail.address.address}}</view>
			</view>

			<view class="row">
				<view>收货人</view>
				<view>{{OrderDetail.address.linkname}} {{OrderDetail.address.phone}}</view>
			</view>

			<view class="row">
				<view>配送方式</view>
				<view>东风快递</view>
			</view>

			<view class="row">
				<view>配送骑手</view>
				<view>飞毛腿</view>
			</view>
		</view>
		<view class="container">
			<view class="title">
				<text>其他</text>
			</view>

			<view class="row">
				<view>订单编号</view>
				<view>{{Order.id}}</view>
			</view>

			<view class="row">
				<view>下单时间</view>
				<view>{{Order.time}}</view>
			</view>

			<view class="row">
				<view>支付状态</view>
				<view>{{Order.payStatus == 0?'待支付':'已完成'}}</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				Order: '',
				OrderDetail: [],
				ip: "http://localhost:8080"
			}
		},
		methods: {

		},
		beforeMount: function() {
			// this.Order = ''
			// this.OrderDetail = []
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			var that = this
			
			uni.$once('showDetail', function(data) {
				that.Order = data.Order
				// 移除监听器
				// uni.$off('goDetail')
				console.log("show...." + that.Order.id)
				uni.request({
					url: that.ip + "/getOrderDetail/" + that.Order.id,
					success: function(data) {
						that.OrderDetail = data.data.OrderDetail
					}
				})
			})
		},
		onUnload: function() {
			
		}

	}
</script>

<style>
	.row {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 10rpx;
	}

	.goods_quantity {
		color: #808080;
	}

	.money_icon {
		width: 22rpx;
		height: 22rpx;
	}

	.name_price {
		display: flex;
		justify-content: space-between;
	}

	.goods_info {
		width: 622rpx;
		padding: 15rpx;
	}

	.goods_img {
		width: 128rpx;
		height: 128rpx;
	}

	.goods_item {
		display: flex;
		flex-direction: row;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.container {
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 2em;
		background-color: #FFFFFF;
	}

	page {
		background-color: #fafafa;
	}
</style>
